<template>
  <view class="flex-col page mobile-login-page">
    <view class="flex-col group mt-69">
      <view class="flex-col justify-start items-end self-center image-wrapper">
        <image class="image_2" mode="widthFix" :src="imgUrl + 'logo.png'" />
      </view>
      <view class="flex-col justify-start items-start self-stretch text-wrapper">
        <input class="font" type="text" placeholder="请输入注册手机号码" />
      </view>
      <view class="flex-col self-stretch group_2">
        <view class="flex-row justify-between group_3">
          <input class="self-start font text_2" type="text" placeholder="请输入短信验证码" />
          <view class="flex-col justify-start items-center self-center text-wrapper_2" @click="getVerificationCode">
            <text class="text">{{ countdownActive ? `${countdown}秒后重发` : '获取验证码' }}</text>
          </view>
        </view>
        <view class="flex-row items-center group_4" @click="handleReadProtocol">
          <view class="group_6" :class="{ 'active': isReadProtocol }"></view>
          <view class="ml-10 group_5">
            <text class="font_2">我已阅读过</text>
            <text class="font_3">《注册协议》</text>
            <text class="font_2">和</text>
            <text class="font_3">《隐私保护协议》</text>
          </view>
        </view>
      </view>
      <button class="mt-24 flex-col justify-start items-center text-wrapper11 w-full">
        <text class="text">登录</text>
      </button>
    </view>
  </view>
</template>
<script setup lang="ts">
  import { ref } from 'vue'
  import { imgUrl } from '@/utils/config'

  const countdownActive = ref(false)
  const countdown = ref(60)
  const getVerificationCode = () => {
    if (countdownActive.value) return // 如果正在倒计时，直接返回

    // 发送获取验证码的请求
    sendVerificationCode()

    // 启动倒计时
    countdownActive.value = true
    countdown.value = 60 // 重置倒计时为60秒

    const timer = setInterval(() => {
      countdown.value--
      if (countdown.value <= 0) {
        clearInterval(timer)
        countdownActive.value = false // 倒计时结束
      }
    }, 1000)
  }
  const sendVerificationCode = () => {
    console.log('发送验证码')
  }

  const isReadProtocol = ref(false)
  const handleReadProtocol = () => {
    isReadProtocol.value = true
  }
</script>
<style scoped lang="scss">
  .mobile-login-page {
    .mt-69 {
      margin-top: 138rpx;
    }
    &.page {
      padding-bottom: 368rpx;
      background-color: #ffffff;
      width: 100%;
      overflow-y: auto;
      overflow-x: hidden;
      height: 100vh;
      .image {
        filter: drop-shadow(0rpx 2rpx 0rpx #4444441a);
        width: 100vw;
        height: 23.4667vw;
      }
      .group {
        padding: 0 64rpx;
        .image-wrapper {
          padding: 12rpx 0 12rpx;
          background-position: 0% 0%;
          background-size: 100% 100%;
          background-repeat: no-repeat;
          width: 263rpx;
          .image_2 {
            width: 100%;
          }
        }
        .text-wrapper {
          margin-top: 144rpx;
          padding-bottom: 32rpx;
          border-bottom: solid 4rpx #ef7350;
        }
        .group_2 {
          margin-top: 80rpx;
          .group_3 {
            padding-bottom: 20rpx;
            border-bottom: solid 2rpx #d3d3d3;
            .text_2 {
              margin-top: 24rpx;
            }
            .text-wrapper_2 {
              padding: 20rpx 0;
              background-image: linear-gradient(
                286.6deg,
                #fd8f56 0%,
                #fd8f56 -10.89%,
                #ffa45f 117.37%,
                #ffa45f 100%
              );
              border-radius: 4rpx;
              width: 240rpx;
              height: 80rpx;
              .text {
                color: #ffffff;
                font-size: 28rpx;
                font-family: 'PingFang SC';
                font-weight: 500;
                line-height: 40rpx;
              }
            }
          }
          .group_4 {
            padding-top: 32rpx;
            .group_6 {
              border-radius: 4rpx;
              width: 24rpx;
              height: 24rpx;
              border-left: solid 2rpx #999999;
              border-right: solid 2rpx #999999;
              border-top: solid 2rpx #999999;
              border-bottom: solid 2rpx #999999;
              &.active {
                // border-color: #ea602d;
                position: relative;
                &::after {
                  content: '';
                  position: absolute;
                  width: 10rpx;
                  height: 10rpx;
                  background-color: #ea602d;
                  border-radius: 50%;
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%, -50%);
                }
              }
            }
            .group_5 {
              line-height: 34rpx;
              height: 34rpx;
              .font_2 {
                font-size: 24rpx;
                font-family: 'PingFang SC';
                line-height: 34rpx;
                font-weight: 500;
                color: #666666;
              }
              .font_3 {
                font-size: 24rpx;
                font-family: 'PingFang SC';
                line-height: 34rpx;
                font-weight: 500;
                color: #ea602d;
              }
            }
          }
        }
        .font {
          font-size: 32rpx;
          font-family: 'PingFang SC';
          line-height: 44rpx;
          font-weight: 500;
          color: #999999;
        }
        .image_3 {
          margin-top: 128rpx;
          width: 622rpx;
          height: 88rpx;
        }
      }
      .w-full {
        background-color: #ea602d !important;
        .text {
          color: #ffffff !important;
        }
      }
      .text-wrapper11 {
        margin-top: 100rpx;
        padding: 20rpx 0;
        width: 590rpx;
        height: 90rpx;
        box-shadow: 0rpx 0rpx 18rpx 0rpx #ee73500a;
        border-radius: 44rpx;
        border: unset !important;
        &::after {
          border: unset !important;
        }
        .text {
          color: #444444;
          font-size: 36rpx;
          font-family: 'PingFang SC';
          line-height: 50rpx;
        }
      }
    }
  }
</style>
